<template>
  <div>
    <!-- refresh ：下拉刷新时触发onRefresh -->
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <!-- 铺设文章列表 -->
      <!-- List 列表
              介绍
              瀑布流滚动加载，用于展示长列表，
              当列表即将滚动到底部时，会触发事件并加载更多列表项。
     -->
      <!-- immediate-check:
      true - 上来默认检查一次触底
      false - 上来不检查触底 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
      >
        <!-- van-cell  单元格：即新闻列表项 -->
        <!-- 组件：自定义事件 子传父  @click="$emit('click')"  -->
        <article-item
          v-for="obj in articleslist"
          :key="obj.art_id"
          :obj="obj"
          @click="articleClickFn(obj.art_id)"
        ></article-item>
      </van-list>

      <!-- articleslist 传入子 -->
    </van-pull-refresh>
  </div>
</template>

<script>
// 目标: 文章列表铺设
// 1. 找到接口, 写api/index.js->接口方法
// 2. ArticleList引入, 发起文章列表请求拿到数据
// 3. v-for遍历article-item, 传入数据对象展示数据

// 组件套路
// 1. 找到类似的, 复制过来, 使用运行看效果
// 2. 删除无用的
// 3. 修改(读属性/直接改文字/标签数量)
// 4. 其他....

// 目标: 底部加载更多组件 (van-list)
// 重要1: 当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true
// 重要2: finished: 加载完成，加载完成后不再触发load事件
// 重要3: 初始化的时候, 就判定是否触底(数据是网络请求回来的-异步, 默认触发load一次)
// 重要4: 数据加载完毕, loading: false(保证下次触底还能执行load事件)
//

// 目标: 触底, 在发请求, 拿到下一页数据
// 1. 接口文档: 发现需要传递timestamp时间戳
// 下一页数据需要传递上一次接口返回的pre_timestamp的时间值
// 2. data函数里nextTime, 专门用于保存紧挨着的上一次的pre_timestamp的值
// 3. onLoad触底加载更多事件方法中, 把nextTime传入API接口方法内
// 4. 修改api/index.js相应接口, 接收timestamp值(不能固定的)

// 目标: 解决默认触发2次的bug, 解决加载更多数据
// 1. list组件immediate-check:false (关闭立即检查)
// 2. onLoad方法里, 要把新的数据和原数据, 进行合并(数据更多)
// 3. 异步加载完毕以后loading:false (保证下次触底还能执行load事件)
// 4. 判断没有更多数据了, finished: true(加载完成)

import ArticleItem from '@/components/ArticleItem.vue'
import { getArticlesListAPI } from '@/api'
export default {
  // 父传子
  props: { channelId: Number },
  components: { ArticleItem },
  data () {
    return {
      articleslist: [],
      list: [],
      loading: false,
      finished: false,
      nextTime: new Date(), // 下一页的文章列表-开头文章的发布时间(来自于上一次响应值里pre_timestamp)

      isLoading: false
    }
  },
  // 刷新页面 --请求接口-调用接口方法
  async created () {
    // console.log(this.channelId)
    // const res = await getArticlesListAPI({
    //   channel_id: this.channelId
    // })
    // console.log(res)
    // this.articleslist = res.data.data.results // 拿到文章列表
    // this.nextTime = res.data.data.pre_timestamp
    // this.loading = false  // 加载状态 ，本次加载完毕，下次触底才能触发load事件和onLoad方法

    // tab 在切换的时候，如果是第一次出现，会走一次created
    // 切回去的时候created不走了，但是标签没动（横向位移）

    this.getArticlesListFn()
  },
  methods: {
    // 封装 -获取文章列表-方法：请求 getArticlesListAPI 调用
    async getArticlesListFn () {
      const res = await getArticlesListAPI({
        channel_id: this.channelId,
        timestamp: this.nextTime
      })
      // 方法1：
      // if (res.data.data && res.data.data.results && res.data.data.results.length === 0) {
      //   // 本次加载更多。。。无数据了。。。没有更多了
      //   this.finished = true
      // }
      this.articleslist = [...this.articleslist, ...res.data.data.results]

      // 若本次pre_timestamp为空，则没有下一页数据
      if (res.data?.data?.pre_timestamp === null) {
        this.finished = true
        this.nextTime = null
      } else {
        this.nextTime = res.data.data.pre_timestamp
      }
      setTimeout(() => {
        this.loading = false
      }, 1000)
      // this.refreshing = false // 本次刷新完毕 v-model 绑定的变量名isLoading->refreshing 便于分辨
      this.isLoading = false // 顶部加载状态关闭
    },

    // 页面数据加载中
    async onLoad () {
      // 异步更新数据
      // const res = await getArticlesListAPI({
      //   channel_id: this.channelId,
      //   timestamp: this.nextTime
      // })
      // // 方法1：
      // if (res.data.data && res.data.data.results && res.data.data.results.length === 0) {
      //   // 本次加载更多。。。无数据了。。。没有更多了
      //   this.finished = true
      // }
      // // 方法2：有兼容性问题，不考虑兼容性问题可以使用它
      // // if (res.data?.data?.results?.length === 0) {
      // //   // 本次加载更多就无数据
      // //   this.finished = true
      // // }

      // // this.articleslist = res.data.data.results // 拿到文章列表
      // this.articleslist = [...this.articleslist, ...res.data.data.results] // 每一页的文章列表
      // this.loading = false // 加载状态 ，本次加载完毕，下次触底才能触发load事件和onLoad方法

      // bug: 页面滑动到最底部，没有数据了，点击切换tab(其他新闻列表项)，会 报错
      // 上来会先走一遍created请求，把数据拿回来铺设页面，等用户真的滚动到最下面了，再次执行 load 事件，这个判断有数据了，再请求下一页

      if (this.articleslist.length > 0) {
        this.getArticlesListFn()
      }

      // 解决: 在load事件方法中判断, 只有页面上有数据, 再触底才执行加载逻辑
    },

    // 顶部 下拉刷新-刷新-新的数据回来，原数组清空，再次发请求，timestamp 改回最新的时间
    onRefresh () {
      this.articleslist = []
      this.nextTime = new Date()
      this.getArticlesListFn()
      //  this.refreshing = false // 本次刷新完毕
    },

    // 文章点击事件--跳转详情页 -===$router.push(`/article_detail?aid=${item.art_id}`)
    articleClickFn (artId) {
      this.$router.push({
        path: '/article_detail',
        query: {
          aid: artId // ？后面的内容  artId: this.obj.art_id
        }
      })
    }
  }
}
</script>

<style>
</style>
